<template>
  <div class="main_spac1" style="padding-bottom: 5px">
    <div class="main_white padding10">
      <div class="main_crumbs boxdq">
        <div class="main_crumbs_l">
          <a href="javascript:;" @click="$router.back(-1)">
            <i class="el-icon-arrow-down"></i>返回
          </a>
          <em>|</em>
          <span>导入图片</span>
        </div>
      </div>
      <div class="main_tile boxdq marginTop10">
        <div class="main_tile_l"><em></em>使用说明</div>
      </div>
      <div class="marginLeft20 paddingBottom10 maincp_sp">
        <p>
          1、本次上传图片，如果商品已有主图则替换，如果商品已有详情图片则累加
        </p>
        <p>2、使用商品名称命名商品图片</p>
        <p>
          3、商品图片命名规则：定义为商品名称_1.JPG、商品名称_2.JPG、商品名称_3.JPG,
        </p>
        <p>4、单张图不能大于2M, 建议图片尺寸800*800， 支持JPG, PNG, JPEG</p>
      </div>
      <div class="main_tile boxdq marginTop20">
        <div class="main_tile_l"><em></em>导入图片</div>
      </div>
      <div>
        <div class="marginTop10 marginLeft20 paddingBottom20 main_upImg">
          <el-upload
            :action="upload_img"
            list-type="picture-card"
            :on-success="handSuccess"
            :show-file-list="false"
            :before-upload="beforeUpload"
            multiple
            :file-list="filelist"
          >
            <span slot="default">
              <svg
                aria-hidden="true"
                class="main_page_svg"
                width="32"
                height="27"
              >
                <use xlink:href="#icon-commodit_camera" />
              </svg>
            </span>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img :src="dialogImageUrl" alt />
          </el-dialog>
          <div class="clearfix"></div>
        </div>
        <div class="maincp_spe boxha">
          <p v-for="(error, index) in error" :key="index">
            {{ index + 1 }}、{{ error }}
          </p>
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="main_tile boxdq marginTop20">
        <div class="main_tile_l"><em></em>导入完成</div>
      </div>
      <div
        class="main_table marginLeft20 marginBottom20"
        style="min-height: 400px"
      >
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="list"
          element-loading-text="加载中"
          fit
          highlight-current-row
          :header-cell-class-name="this.$verticaline"
        >
          <el-table-column
            label="商品名称"
            prop="name"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="商品图片"
            :show-overflow-tooltip="true"
            class-name="main_hei"
          >
            <template slot-scope="scope">
              <div :class="{ image_gd: scope.row.src }">
                <ul class="box">
                  <li class="demo-image">
                    <el-image
                      fit="fill"
                      :src="scope.row.src"
                      :preview-src-list="pics"
                    >
                      <div slot="error" class="image-slot">
                        <img :src="puzzleImg" />
                      </div>
                    </el-image>
                  </li>
                </ul>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { upload_img, puzzleImg } from "@/api/currency";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";

export default {
  components: {},
  data() {
    return {
      // 列表数据
      list: [],
      puzzleImg,
      listLoading: false,
      pics: [],
      error: [],
      // 上传图片
      filelist: [],
      upload_img,
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  created() {},
  methods: {
    // 上传图片-成功
    handSuccess(res, file, fileList) {
      if (res.errcode == 40024) {
        this.error.push(res.errmsg);
      } else {
        this.list.push({
          name: res.data.name,
          src: res.data.src,
        });
        this.pics.push(res.data.src);
      }
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传商品图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.main_upImg {
  float: left;
}
.maincp_spe {
  margin-left: 160px;
  margin-top: 10px;
  float: left;
  width: 81%;
  p {
    margin-right: 20px;
    font-size: $font_14;
    color: $colour_red;
    margin-bottom: 10px;
  }
}
.maincp_sp {
  p {
    margin-bottom: 10px;
    line-height: 22px;
    font-size: $font_14;
  }
}
.main_table {
  .image_gd {
    height: 120px;
  }
  .demo-image {
    position: relative;
    margin-left: 20px;
    border: 1px solid #f8f8f9;
    width: 120px;
    overflow: hidden;
    .el-upload-list__item-status-label {
      position: absolute;
      right: -15px;
      top: -6px;
      z-index: 91;
      width: 40px;
      height: 24px;
      background: #13ce66;
      text-align: center;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
      box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
      display: block;
      i {
        font-size: 12px;
        margin-top: 11px;
        color: $white;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }
    }
    &:first-child {
      margin-left: 0;
    }
    /deep/.el-image__inner {
      width: 120px;
      height: 120px;
    }
    img {
      width: 120px;
      height: 120px;
    }
  }
}
</style>
